<template>
	<view class="page flex-col">
		<view class="box_1 flex-col">

			<view class="block_1 flex-col justify-end">
				<u-tabs :list="tabsList" lineColor="#E9353E" :activeStyle="{
				  color: '#333',
				}" :inactiveStyle="{
				  color: '#c2c1c1',
				}" :lineWidth="30" :current="currentTab" @click="onClickTab" />
				<!-- <div class="tabs_1 flex-col justify-between">
					<view class="text-wrapper_1 flex-row justify-between">
						<text class="text_2">当前兑换</text>
						<text class="text_3">历史记录</text>
					</view>
					<view class="image-wrapper_1 flex-row">
						<image class="image_2" referrerpolicy="no-referrer"
							src="/static/lanhu_duihuanjilu/ps6ysa2t1bl2u90wt823yvtoony9k4yxse8631e404-8566-4332-b6f9-2c907c8403be.png" />
					</view>
				</div> -->
			</view>
			<scroll-view scroll-y="true">
				<view class="list_1 flex-col">
					<view class="list-items_1 flex-col" v-for="(item, index) in loopData1" :key="index"
						@click="loopDatalist(item)">
						<view class="group_2 flex-row justify-between">
							<view class="image-text_1 flex-row justify-between">
								<image class="icon_2"
									src="https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/2cb6e862b2b6140cfcb39e7275dc9a83c0d4857e.png" />
								<text class="text-group_1">{{item.name}}</text>
							</view>
							<text class="text_4" v-if="item.status == 2">待领取</text>
							<text class="text_4" v-if="item.status == 3">已过期</text>
							<text class="text_4" v-if="item.status == 4">已领取</text>
						</view>
						<view class="group_3 flex-row">
							<image class="image_3" referrerpolicy="no-referrer" :src="item.goods_image" />
							<view class="box_2 flex-col">
								<text class="text_5">{{item.goods_name}}</text>
								<!-- <view class="tag_1 flex-col">
								<text class="text_6">{{item.lanhutext3}}</text>
							</view> -->
								<view class="text-wrapper_2">
									<text class="text_7">{{item.points}}</text>
									<text class="text_8">元</text>
								</view>
							</view>
							<text class="text_9">×1</text>
						</view>

						<view class="group_4 flex-row" v-if="status == 2">
							<text class="text_list">领取截至{{item.end_time}}</text>
							<button class="button_1 flex-col">
								<text class="text_10">查看领取码</text>
							</button>
						</view>
					</view>
				</view>
			</scroll-view>
			<!-- <view class="list_1 flex-col" v-if="currentTab == 1">
				<view class="list-items_1 flex-col" v-for="(item, index) in loopData1" :key="index">
					<view class="group_2 flex-row justify-between">
						<view class="image-text_1 flex-row justify-between">
							<image class="icon_2" referrerpolicy="no-referrer" :src="item.lanhuimage0" />
							<text class="text-group_1">{{item.lanhutext0}}</text>
						</view>
						<text class="text_4">已领取</text>
						<text class="text_4">已过期</text>
					</view>
					<view class="group_3 flex-row">
						<image class="image_3" referrerpolicy="no-referrer" :src="item.lanhuimage1" />
						<view class="box_2 flex-col">
							<text class="text_5">{{item.lanhutext2}}</text>
							<view class="tag_1 flex-col">
								<text class="text_6">{{item.lanhutext3}}</text>
							</view>
							<view class="text-wrapper_2">
								<text class="text_7">{{item.lanhutext4}}</text>
								<text class="text_8">{{item.lanhutext5}}</text>
							</view>
						</view>
						<text class="text_9">×1</text>
					</view>
					
				</view>
			</view> -->
		</view>
	</view>
</template>
<script>
	const index = require('@/api/personal/index.js')
	export default {
		data() {
			return {
				loopData0: [],
				loopData1: [{
						goods_image: 'https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/2cb6e862b2b6140cfcb39e7275dc9a83c0d4857e.png',
						name: '体鱼平台',
						status:'2',
						goods_image: 'https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/441cd043e72e4838ba0bb4d57b40797cccf190b8.png',
						goods_name: '乒乓球拍',
						lanhutext3: '红色轻薄款',
						points: '20',
						end_time: '2000-20-20',
					},
				],
				constants: {},
				tabsList: [{
						name: "当前兑换"
					},
					{
						name: "历史兑换"
					}
				],
				currentTab: 0,
				orderStatus: '',
				status: "",
				listQuery: { //分页
					pageNo: 1,
					pageSize: 6,
				},
				totalPage: '', //几页
			};
		},
		onLoad() {
			this.status = 2
			// this.getOrder()
		},
		methods: {
			async getOrder() {
				let that = this;
				if (this.listQuery.pageNo === 1) that.looplist = [];
				let params = {
					app_id: this.$https.weixinAppId,
					project_id: getApp().globalData.projectId,
					open_id: uni.getStorageSync('openid'),
					status: this.status,
					page: this.listQuery.pageNo,
					limit: this.listQuery.pageSize,
				};
				let res = await index.getOrder(params);
				if (res.code === 1) {
					that.loopData0 = that.loopData0.concat(res.data.result.data); //将数据拼接在一起
					that.totalPage = res.data.result.last_page
				}
			},
			// 下拉刷新
			onReachBottom() {
				// uni.showLoading({
				// 	title: '加载中'
				// });
				if (this.totalPage <= this.listQuery.pageNo) {
					// uni.hideLoading();
					uni.showToast({
						title: '没有更多了',
						duration: 2000,
						icon: 'none'
					});
					return
				}
				this.listQuery.pageNo += 1;
				this.getOrder()
			},
			onClickTab({
				index
			}) {
				this.loopData0 = []
				this.listQuery.pageNo = 1
				this.currentTab = index;
				if (this.currentTab == 0) {
					this.status = 2
				} else if (this.currentTab == 1) {
					this.status = 1
				}
				this.getOrder()
			},
			loopDatalist(item) {
				uni.navigateTo({
					url: 'gift_details?id=' + item.id
				})
			},
		}
	};
</script>
<style lang='scss'>
	@import '../../static/css/common/common.scss';

	.page {
		position: relative;
		width: 750rpx;
		height: 100%;
		overflow: hidden;

		.box_1 {
			width: 750rpx;
			height: 100%;

			.block_1 {
				background-color: rgba(255, 255, 255, 1);
				width: 750rpx;
				height: 100rpx;



				.tabs_1 {
					height: 60rpx;
					width: 274rpx;
					margin: 26rpx 0 0 30rpx;

					.text-wrapper_1 {
						width: 274rpx;
						height: 29rpx;

						.text_2 {
							width: 116rpx;
							height: 29rpx;
							overflow-wrap: break-word;
							color: rgba(51, 51, 51, 1);
							font-size: 30rpx;
							font-family: PingFang-SC-Bold;
							font-weight: 700;
							text-align: left;
							white-space: nowrap;
							line-height: 30rpx;
						}

						.text_3 {
							width: 117rpx;
							height: 28rpx;
							overflow-wrap: break-word;
							color: rgba(153, 153, 153, 1);
							font-size: 30rpx;
							font-family: PingFang-SC-Medium;
							font-weight: 500;
							text-align: left;
							white-space: nowrap;
							line-height: 30rpx;
						}
					}

					.image-wrapper_1 {
						width: 58rpx;
						height: 8rpx;
						margin: 23rpx 0 0 29rpx;

						.image_2 {
							width: 58rpx;
							height: 8rpx;
						}
					}
				}
			}

			.list_1 {
				width: 690rpx;
				/* height: 812rpx; */
				height: 100%;
				justify-content: space-between;
				margin: 30rpx 0 0 30rpx;

				.list-items_1 {
					box-shadow: 0px 0px 53px 3px rgba(215, 236, 251, 0.68);
					background-color: rgba(255, 255, 255, 1);
					border-radius: 16px;
					height: 396rpx !important;
					margin-bottom: 20rpx;
					width: 690rpx;
					justify-content: flex-center;

					.group_2 {
						width: 641rpx;
						height: 30rpx;
						margin: 30rpx 0 0 24rpx;

						.image-text_1 {
							width: 80%;
							height: 30rpx;

							.icon_2 {
								width: 35rpx;
								height: 30rpx;
							}

							.text-group_1 {
								width: 100%;
								height: 27rpx;
								color: rgba(51, 51, 51, 1);
								font-size: 28rpx;
								text-align: left;
								line-height: 28rpx;
								margin-top: 2rpx;
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;
							}
						}

						.text_4 {
							width: 84rpx;
							height: 27rpx;
							overflow-wrap: break-word;
							color: rgba(255, 65, 5, 1);
							font-size: 28rpx;
							font-family: PingFang-SC-Regular;
							font-weight: NaN;
							text-align: left;
							white-space: nowrap;
							line-height: 28rpx;
							margin-top: 2rpx;
						}
					}

					.group_3 {
						width: 636rpx;
						height: 180rpx;
						margin: 30rpx 0 0 24rpx;

						.image_3 {
							width: 180rpx;
							height: 180rpx;
						}

						.box_2 {
							width: 161rpx;
							height: 166rpx;
							margin: 13rpx 0 0 21rpx;

							.text_5 {
								width: 400rpx;
								height: 25rpx;
								color: rgba(51, 51, 51, 1);
								font-size: 26rpx;
								font-weight: 500;
								text-align: left;
								line-height: 26rpx;
								margin-left: 3rpx;
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;
							}

							.tag_1 {
								background-color: rgba(243, 243, 243, 1);
								border-radius: 18px;
								height: 36rpx;
								width: 158rpx;
								margin: 20rpx 0 0 3rpx;

								.text_6 {
									width: 118rpx;
									height: 23rpx;
									overflow-wrap: break-word;
									color: rgba(51, 51, 51, 1);
									font-size: 24rpx;
									font-family: PingFang-SC-Medium;
									font-weight: 500;
									text-align: left;
									white-space: nowrap;
									line-height: 24rpx;
									margin: 6rpx 0 0 20rpx;
								}
							}

							.text-wrapper_2 {
								width: 85rpx;
								height: 29rpx;
								overflow-wrap: break-word;
								font-size: 0;
								font-family: DIN-Bold;
								font-weight: 700;
								text-align: left;
								white-space: nowrap;
								line-height: 36rpx;
								margin-top: 56rpx;

								.text_7 {
									width: 85rpx;
									height: 29rpx;
									overflow-wrap: break-word;
									color: rgba(51, 51, 51, 1);
									font-size: 36rpx;
									font-family: DIN-Bold;
									font-weight: 700;
									text-align: left;
									white-space: nowrap;
									line-height: 36rpx;
								}

								.text_8 {
									width: 85rpx;
									height: 29rpx;
									overflow-wrap: break-word;
									color: rgba(51, 51, 51, 1);
									font-size: 24rpx;
									font-family: PingFang-SC-Medium;
									font-weight: 500;
									text-align: left;
									white-space: nowrap;
									line-height: 24rpx;
								}
							}
						}

						.text_9 {
							width: 26rpx;
							height: 20rpx;
							overflow-wrap: break-word;
							color: rgba(51, 51, 51, 1);
							font-size: 28rpx;
							font-family: PingFang-SC-Bold;
							font-weight: 700;
							text-align: left;
							white-space: nowrap;
							line-height: 28rpx;
							margin: 150rpx 0 0 248rpx;
						}

					}

					.group_4 {
						width: 100%;
						height: 60rpx;
						margin: 36rpx 0 30rpx 0;
						margin-top: 36rpx !important;

						.button_1 {
							background-color: rgba(255, 235, 232, 1);
							border-radius: 30px;
							height: 60rpx;
							width: 174rpx;
							float: right;
							margin-left: 25%;

							.text_10 {
								width: 142rpx;
								height: 27rpx;
								overflow-wrap: break-word;
								color: rgba(233, 53, 62, 1);
								font-size: 28rpx;
								font-family: PingFang-SC-Medium;
								font-weight: 500;
								text-align: center;
								white-space: nowrap;
								line-height: 28rpx;
								margin: 17rpx 0 0 16rpx;
							}
						}

						.text_list {
							width: 40%;
							height: 20rpx;
							color: #666666;
							font-size: 26rpx;
							text-align: left;
							line-height: 28rpx;
							margin: 20rpx 0 0 48rpx;
							float: left;
						}
					}
				}
			}
		}
	}
</style>
